<template>
	<view class="xiangqing">
		<!-- 轮播图 -->
		<u-swiper :list="list" mode="number" indicator-pos="bottomRight" height="400" border-radius="0"
			:effect3d="false"></u-swiper>
		<!-- 价格 -->
		<view class="jiage">
			<view>
				<text>价格</text>
				<text class="pic">33.8</text>
				<text class="pics">万</text>
			</view>
		</view>
		<!-- 介绍 -->
		<view class="jieshao">
			<view class="title">三一东风1023车载泵</view>
			<view class="tag">
				<text>热门</text>
				<text>现货</text>
				<text>寄售</text>
				<text>可过户</text>
				<text>无贷款</text>
			</view>
			<view class="chujia">
				<text>我的出价:</text>
				<text>暂无</text>
			</view>
			<view class="shebei">
				<text>设备 ID</text>
				<text style="margin-right: 180rpx">7549</text>
				<text>所在市区</text>
				<text>长沙市</text>
			</view>
			<view class="province">
				<text class="sheng">所在省份</text>
				<text>湖南省</text>
			</view>
		</view>
		<!-- 基本信息 -->
		<view class="xinxi">
			<view class="title">基本信息<text class="titles">(信息仅供参考,具体以图片视频为准)</text></view>
			<view class="canshu">
				<view class="zuo">
					<view>设备品牌 <text>中联</text></view>
					<view>表显小时 <text>4409小时</text></view>
					<view>臂架长度 <text>56.0米</text></view>
					<view>底盘桥数 <text>4桥</text></view>
					<view>支腿类型 <text>X支腿</text></view>
					<view>过户 <text style="margin-left: 90rpx;">可以过户</text></view>
				</view>
				<view class="you">
					<view>出厂年份 <text>2019年</text></view>
					<view>排放标准 <text>国五</text></view>
					<view>底盘品牌 <text>奔驰</text></view>
					<view>泵送方量 <text>76354方</text></view>
					<view>所在省份 <text>陕西省</text></view>
					<view>贷款情况 <text>无贷款</text></view>
				</view>
			</view>
		</view>

		<!-- 底部 -->
		<view class="footer">
			<u-icon class="fenxiang" name="zhuanfa" size="34rpx" label="分享" label-size="24rpx" label-pos="bottom">
			</u-icon>
			<u-button class="btn1" type="error" size="medium">出个价</u-button>
			<u-button class="btn2" type="error" size="medium">立即咨询</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						image: '/static/dome/c1.jpg',
					},
					{
						image: '/static/dome/c2.jpg',
					},
					{
						image: '/static/dome/c1.jpg',
					}
				],
			}
		}
	}
</script>

<style lang="scss" scoped>
	.xiangqing {
		background-color: #f6f7f9;

		// 价格
		.jiage {
			height: 100rpx;
			line-height: 100rpx;
			padding-left: 30rpx;
			background-color: #fb463f;
			color: #fff;
			font-size: 24rpx;
			display: flex;

			.pic {
				font-size: 32rpx;
				margin-left: 10rpx;
				vertical-align: buttom;
				vertical-align: bottom;
			}

			.pics {
				font-size: 40rpx
			}
		}

		// 介绍
		.jieshao {
			height: 340rpx;
			background-color: #fff;
			padding: 30rpx 20rpx;

			.title {
				font-size: 32rpx;
				font-weight: 700;
				margin-bottom: 20rpx;
			}

			.tag text {
				font-size: 24rpx;
				background-color: #fde0d7;
				color: #fb3232;
				margin-right: 10rpx;
				padding: 2rpx 6rpx;
			}

			.chujia {
				margin: 20rpx 0;
			}

			.chujia text {
				color: #fb3232;
				margin-right: 10rpx;
			}

			.shebei text {
				color: #696667;
				margin-right: 40rpx;
			}



			.province {
				margin-top: 20rpx;

				.sheng {
					color: #696667;
					margin-right: 20rpx;
				}
			}


		}

		// 基本信息
		.xinxi {
			padding: 30rpx 20rpx;
			margin: 10rpx 0 50rpx;
			background-color: #fff;

			.title {
				font-size: 32rpx;

				.titles {
					margin-left: 10rpx;
					font-size: 24rpx;
					color: #c2a5a5;

				}
			}

			.canshu {
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
				color: #666666;

				.zuo,
				.you {
					width: 50%;
					height: 360rpx;
				}

				.zuo view,
				.you view {
					margin-bottom: 20rpx;
				}

				.zuo text,
				.you text {
					margin-left: 40rpx;
					color: #333333;
				}

			}

		}



		// 底部
		.footer {
			height: 100rpx;
			background-color: #fff;
			display: flex;
			position: fixed;
			bottom: 0;
			left: 0;

			.fenxiang {
				margin: 0 40rpx;
			}

			.btn1 {
				margin-top: 5rpx;
				height: 90rpx;
				color: #757677;
				margin-right: 80rpx;
				background-color: #f5f6f7;
			}

			.btn2 {
				width: 240rpx;
				margin-top: 5rpx;
				height: 90rpx;
				color: #fff;
			}

		}

	}
</style>
